<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px">
      <div class="import">
        <div class="upload-demo">
          <el-upload
            action=""
            :http-request="handleImport"
            :on-change="handleChange"
          >
            <el-button type="primary" plain ref="import"> 上传文件 </el-button>
          </el-upload>
        </div>
        <!-- 进度条 -->
        <div v-if="loading">
          <el-progress
            :percentage="progressPercent"
            :text-inside="true"
            :stroke-width="24"
            status="success"
          >
          </el-progress>
        </div>

        <div class="text">
          <p>
            <span>没有模板？</span>
            <span class="clk">点击</span>
            <span class="btn" @click="handleDownload()">下载模板</span>
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '导入',
      dialogVisible: false,
      templatePort: '', //模板接口
      fileTemp: '',
      busEmit: '',
      errorTxt: '',
      loading: true,
      progressPercent: 50,
    }
  },
  props: ['curColumn'],
  mounted() {
    //导入书籍
    this.templatePort = 'sysJournal/openApi/down'
    this.busEmit = 'refreshJournalList'
    // if (this.type == 'course') {
    // }
    this.$bus.$on('showImportSysJournal', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showImportSysJournal')
  },
  methods: {
    //显示弹窗
    init() {
      this.errorTxt = ''
      this.dialogVisible = true
    },
    //下载模板
    handleDownload() {
      window.location.href = this.baseURL + this.templatePort
    },

    //导入数据
    async handleImport() {
      let formdata = new FormData()
      formdata.append('file', this.fileTemp)
      formdata.append('columnId', this.curColumn.id)
      await this.$store.dispatch('importSysJournal', formdata)
      this.dialogVisible = false
      this.$bus.$emit('refreshJournalList')
    },
    handleResult(res) {
      let errorData = res.data.data[0].errorData
      if (errorData.length) {
        let htmls = ''
        this.errorTxt = ''
        errorData.forEach((v) => {
          htmls += `<p>${v}</p>`
          this.errorTxt += v + '\r\n'
        })
        this.$message({
          type: 'warning',
          duration: 10000,
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: htmls,
        })
      } else {
        this.$bus.$emit(this.busEmit)
        this.$message({
          message: '导入成功',
          type: 'success',
        })
      }
    },
    handleChange(file) {
      this.fileTemp = file.raw
    },
  },
}
</script>
<style scoped>
.import {
  min-height: 200px;
  margin-left: 60px;
}
.upload-demo {
  width: 98px;
  height: 40px;
  overflow: hidden;
}
.text {
  line-height: 100px;
}
.text .clk {
  padding-left: 20px;
  background: url('~@/assets/icon05.png') no-repeat left center;
}
.text .btn {
  color: #005ebb;
  cursor: pointer;
  border-bottom: 1px solid #005ebb;
}
.text .dis {
  color: #c0c4cc;
  cursor: not-allowed;
  border-bottom: 1px solid #c0c4cc;
}
</style>